<template>
	<view class="content">
		<!-- 电量显示栏-->
		<view class="top_nav">
		<view class="kong"></view>
			<!-- <image src="../../static/buy/1.png"></image> -->
			<view class="tab_item">
				<view class="return" @click="returnPage"><image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/course/jiantou.png"></image></view>
				<view class="title">自选通道明细</view>
				<view class="return"></view>
			</view>
		</view>

		<view class="trading_s">
			
			<!-- 交易细明 -->
			<view class="trading_detail">
				<view class="trading_item" v-for="(item, index) in trading" :key="index">
					<!-- 银行 -->
					<view class="order_no">订单号:<text>{{item.orderNo}}</text></view>
					<view class="trading_wrap">
						<view class="posSn">交易状态:<text style="color: #00AAEE;">{{item.msg}}</text></view>
						<view class="trading_box">
							<view class="trading_left">
								<view class="transTime">交易时间:<text>{{item.time}}</text></view>
							</view>
							<view class="trading_right">{{item.money/100}}<text>元</text></view>
						</view>
					</view>
				</view>
				<uni-load-more :status="loadingType"></uni-load-more>
				<view class="blank"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
	components: {  },
	data() {
		const currentDate = this.getDate({
			format: true
		});
		return {
			checkname:"全部",
			array: [],
			index: 0,
			type_obj:[],
			AlertClass: 0,
			AlertPosition: '',
			date: '时间',
			date1:null,
			sumnum: 0,
			trading: [
				// {
				// id:1,
				// brank_img:'../../static/myjgq/guangdatubiao.png',
				// brank_name:'光大银行',
				// brank_card:'6226928382299172',
				// pay_status:'已支付',
				// trading_type:'刷卡交易(DO)',
				// trading_time:'2020-02-21 20:22:56',
				// money:'4580.00'
				// },{
				// id:2,
				// brank_img:'../../static/myjgq/guangdatubiao.png',
				// brank_name:'光大银行',
				// brank_card:'6226928382299172',
				// pay_status:'未支付',
				// trading_type:'刷卡交易(DO)',
				// trading_time:'2020-02-21 20:22:56',
				// money:'4580.00'
				// },{
				// id:3,
				// brank_img:'../../static/myjgq/guangdatubiao.png',
				// brank_name:'光大银行',
				// brank_card:'6226928382299172',
				// pay_status:'已支付',
				// trading_type:'刷卡交易(DO)',
				// trading_time:'2020-02-21 20:22:56',
				// money:'4580.00'
				// }
			],
			limit:10,
			pageNum:1,
			loaded:false,
			loadingType:'more',
			type_id:null,
			token:'',
		};
	},
	computed: {
		//开始时间
		startDate() {
			return this.getDate('start');
		},
		//结束时间
		endDate() {
			return this.getDate('end');
		}
	},
	onLoad(option) {
		this.token=option.token
	},
	onPullDownRefresh() {
		this.pageNum=1;
		this.trading=[];
		this.loadingType = 'more';
		this.loadData();
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	onReachBottom() {
		//上拉更新交易明细
		this.loadData();
	},
	onShow() {
		//获取交易明细
		this.loadData();
		
	},
	methods: {
		loadData(){
			if(this.loadingType == "loading" || this.loadingType == 'noMore'){
			return;	
			}
			this.loadingType="loading"
			let params = {
				page_num: this.pageNum,
				token:this.token
			};
			var url = '/api/balance/trans/quickinformation';
			this.Unfold_data.upload_data(params, 'GET', url, res => {
				if (res.statusCode == 200 && res.data.code == 1) {
				this.loadingType = 'more';
				this.pageNum = this.pageNum + 1;
					
					if (!res.data.data.list) {
						this.loadingType = 'noMore';
					}
					this.trading = this.trading.concat(res.data.data.list);
					 
					if (res.data.data.list.length < this.limit) {
						this.loadingType = 'noMore';
					} 
					this.loaded = true;
				} else if (res.statusCode == 200 && res.data.code == 401) {
					this.Unfold_data.showWindow(res.data.msg);
				} else {
					this.Unfold_data.showWindow(res.data.msg);
				}
			});
		},
		//根据日期获取交易明细
		bindDateChange(e) {
			this.date = e.target.value;
			this.date1 = e.target.value;
			this.pageNum = 1
			this.trading=[]
			this.loadData('month')
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			return `${year}年${month}月`;
		},
		//返回上一页
		returnPage() {
			uni.navigateBack({
				delta: 1
			});
		},
		//根据类型
		bindPickerChange(e) {
			this.index = e.target.value
			this.checkname = this.type_obj[this.index].name
			this.type_id = this.type_obj[this.index].id;
			this.pageNum=1
			this.loadData(3)
		},
	}
};
</script>

<style lang="scss">
	.blank {
		height: 100upx;
	}
.content {
	width: 100%;
	position: relative;
	.top_nav{
		width: 100%;
		height: 160upx;
		background-image: url('https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/buy/1.png');
		background-size: cover;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		.kong{
			width: 100%;
			height: 60upx;
		}
		.tab_item{
			width: 90%;
			margin: 0 auto;
			height: 100upx;
			display: flex;
			align-items: center;
			justify-content: center;
			.return{
				flex: 1;
				width: 100%;
				image{
					width: 29upx;
					height: 29upx;
				}
			}
			.title{
				flex: 8;
				width: 100%;
				color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 10;
			}
		}
	}
	.trading_s{
		width: 100%;
		padding-top: 164upx;
		.wrap_wrap {
			width: 100%;
			height: 90upx;
			background: #ededed;
			display: flex;
			align-items: center;
			.choose_time {
				width: 90%;
				margin: 0 auto;
				.uni-list {
					.uni-list-cell {
						// .choose_date1{
						// 	display: flex;
						// 	align-items: center;	
						// 	image{
						// 		width: 35upx;
						// 		height: 35upx;
						// 	}
						// 	.sreening_wrap {
						// 		width: 400upx;
						// 		height: 100vh;
						// 		background-color: #ffffff;
						// 		.type_obj_str {
						// 			height: 100upx;
						// 			line-height: 100upx;
						// 			text-align: center;
						// 			font-size: 36upx;
						// 			color: #7c7c7c;
						// 			border-bottom: 2upx solid #c0c4cc;
						// 		}
						// 	}
						// }
						.uni-list-cell-db {
							display: flex;
							align-items: center;
							.select-date {
								flex: 1;
								.choose_date{
									display: flex;
									align-items: center;	
									image{
										width: 35upx;
										height: 35upx;
									}
									
								}
								
							}
							.pay_success{
								flex: 2;
								display: flex;
								align-items: center;
								justify-content: flex-end;
								.money {
									padding-right: 20upx;
									color: #d53131;
									font-weight: bold;
									
									text {
										font-size: 28upx;
									}
								}
							}
						}
					}
				}
				
			}
		}
		.trading_detail {
			width: 100%;
			.trading_item {
				width: 95%;
				margin: 0 auto;
				box-shadow: 0 0 10upx #C0C4CC;
				border-radius: 20upx;
				margin-top: 20upx;
				padding: 20upx 30upx;
				.order_no{
					width: 100%;
					height: 60upx;
					border-bottom: 2upx solid #ededed;
					display: flex;
					align-items: center;
					text{
						padding-left: 20upx;
					}
				}
				.trading_wrap{
					width: 100%;
					padding: 15upx 0;
					font-size: 28upx;
					.customerName{
						padding: 5upx 0;
						font-weight: bold;
					}
					.posSn{
						text{
							padding-left: 20upx;
							font-size: 26upx;
							color: #7c7c7c;
						}
					}
					.trading_box{
						width: 100%;
						padding-top: 10upx;
						display: flex;
						align-items: center;
						justify-content: center;
						.trading_left{
							flex: 2;
							.feeStr{
								padding: 5upx 0;
								text{
									padding-left: 20upx;
									color: #ff0000;
								}
							}
							.transTime{
								font-size: 24upx;
								color: #7c7c7c;
								text{
									padding-left: 20upx;
								}
							}
						}
						.trading_right{
							flex: 1;
							text-align: right;
							font-size: 36upx;
							color: #4399FC;
							text{
								font-size: 24upx;
							}
						}
					}
				}
			}
		}
	}
}
</style>
